import { Navigate, useRoutes } from "react-router-dom";
import NotFound from "../components/404";
import Login from "../components/Login";
import Main from "../components/Main";
import About from "../components/Main/About";
import Home from "../components/Main/Home";
import Music from '../components/Main/Home/Music'
import News from '../components/Main/Home/News'



// 为我们所有的路由都写在App中会显得比较杂乱,不好管理,所以我们发明了路由表
// 将所有路由都写在外面一个专门的路由文件中,暴露之后在引入,最后配合useRoutes方法使用
const routes =[
    {
        path:'/login',
        element:<Login/>
    },
    {
        path:'/main',
        element:<Main/>,
        children:[
            {
                path:'/main/home',
                element:<Home/>,
                children:[
                    {
                        path:'/main/home/music',
                        element:<Music />
                    },
                    {
                        path:'/main/home/news',
                        element:<News />
                    }
                ]
            },
            {
                path:'/main/about',
                element:<About/>
            },
        ]
    },
    {
        path:'/login',
        element:<Navigate/>
    },
    {
        path:'/login',
        element:<NotFound/>
    },
]

export default routes

// useRoutes组件方法,他可以用于根据路由表,动态创建Routes和Route,必须在函数组件中使用
// 方式1:在组件中可以直接在路由表中,将所有路由全部遍历出结果并暴露,然后在App中直接引入结果就可以
export const GetRoutes=()=>{
    return useRoutes(routes)
}


// 方式二:可以自定义一个hooks
export const useMyRoutes = () => {
    //在自定义hooks中是可以使用hook
    return useRoutes(routes)
}